<template>
	<view>
		<!-- 搜索 -->
		<!-- <view class="navbar"></view> -->
		<view class="search_bo">
			<view class="">
				<image src="../../../static/PersonalCenter/fanhui.png" mode="" class="back" @click="back"></image>
			</view>
			<view class="search">
				<image src="../../../static/PersonalCenter/sousuo.png" class="searchImg" mode=""></image>
				<input type="text" value="" placeholder="搜索我的订单" class="searchInp" />
			</view>
			
		</view>
		<view class="" style="padding-top: 206rpx; ">
			<view class="option"  >
				<view class="" v-for="(item,index) in orderList" :key="index" @click="change(index)">
					<view :class="current == index ? 'tabsbox-pitch': ''">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 全部 -->
        <view class="content" v-if="current == 0">
			<view class="tobeused">
				<view class="wuhan">
					<view class="piao">武汉孝贤禅寺湖北0元票</view>
					<view class="dai">待使用</view>
				</view>
				<view class="line"></view>
				<view class="Totalprice">
					<image src="../../../static/PersonalCenter/xiaoxian.png" mode="" class="xiaoxian"></image>
					<view class="number">
						<view class="">张数: 1</view>
						<view class="">总价: 0.0元</view>
					</view>
				</view>
			</view>
			<view class="tobeused">
				<view class="wuhan">
					<view class="piao">武汉孝贤禅寺湖北0元票</view>
					<view class="dai">待使用</view>
				</view>
				<view class="line"></view>
				<view class="Totalprice">
					<image src="../../../static/PersonalCenter/xiaoxian.png" mode="" class="xiaoxian"></image>
					<view class="number">
						<view class="">张数: 1</view>
						<view class="">总价: 0.0元</view>
					</view>
				</view>
			</view>
			<view class="tobeused">
				<view class="wuhan">
					<view class="piao">武汉孝贤禅寺湖北0元票</view>
					<view class="dai">待使用</view>
				</view>
				<view class="line"></view>
				<view class="Totalprice">
					<image src="../../../static/PersonalCenter/xiaoxian.png" mode="" class="xiaoxian"></image>
					<view class="number">
						<view class="">张数: 1</view>
						<view class="">总价: 0.0元</view>
					</view>
				</view>
			</view>
			<view class="tobeused">
				<view class="wuhan">
					<view class="piao">武汉孝贤禅寺湖北0元票</view>
					<view class="dai">待使用</view>
				</view>
				<view class="line"></view>
				<view class="Totalprice">
					<image src="../../../static/PersonalCenter/xiaoxian.png" mode="" class="xiaoxian"></image>
					<view class="number">
						<view class="">张数: 1</view>
						<view class="">总价: 0.0元</view>
					</view>
				</view>
			</view>
			<view class="tobeused">
				<view class="wuhan">
					<view class="piao">武汉孝贤禅寺湖北0元票</view>
					<view class="dai">待使用</view>
				</view>
				<view class="line"></view>
				<view class="Totalprice">
					<image src="../../../static/PersonalCenter/xiaoxian.png" mode="" class="xiaoxian"></image>
					<view class="number">
						<view class="">张数: 1</view>
						<view class="">总价: 0.0元</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
					name: '全部'
				},{
					name: '待付款'
				},{
					name: '待使用'
				},{
					name: '待评价'
				},{
					name: '退款/售后'
				}],
				current: 0, // tab栏索引
			};
		},
		methods:{
			back(){
				uni.switchTab({
					url:'../user'
				})
			},
			// tab切换
			change(index){
				
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEEEEE;
	}
	
	.search_bo {
		display: flex;
		align-items: center;
		height: 120rpx;
		width: 100%;
		background-color: #C52B2E;
		padding-top: 88rpx;
		position: fixed;
		z-index: 999 !important;
	.goback {
		width: 22rpx;
		margin: 0 0rpx 0 28rpx;
	}
	
	.topicText {
		font-size: 35rpx;
		color: #FFFFFF;
		margin: 0 auto;
		letter-spacing: 2rpx;
		font-weight: 700;
	}
		.search {
			display: flex;
			align-items: center;
			width: 82%;
			background-color: #fff;
			height: 69rpx;
			border-radius: 20px;
			margin: 0 0 0 34rpx;
	
			.searchImg {
				width: 49rpx;
				height: 43rpx;
				margin-left: 20rpx;
			}
	
			.searchInp {
				font-size: 30rpx;
				color: #333;
				padding-left: 10rpx;
			}
		}
	
		.userImg {
			width: 69rpx;
			height: 69rpx;
			margin: 0 20rpx;
		}
	}
	.back {
		width: 22rpx;
		height: 37rpx;
		padding-left: 28rpx;
	}
	.option {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #757474;
		position: fixed;
		z-index: 999 !important;
		// padding-top: 300rpx;
		.tabsbox-pitch {
			color: #C52B2E;
			padding-bottom: 5rpx;
			border-bottom: 5rpx solid ;
		}
	}
	.content {
		padding-top: 120rpx;
		padding-left: 30rpx;
		.tobeused {
			width: 690rpx;
			height: 300rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.wuhan {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 21rpx 28rpx 28rpx;
				.piao {
					font-size: 33rpx;
					font-weight: 600;
					color: #333333;
				}
				.dai {
				    font-size: 33rpx;
					font-weight: 600;
					color: #757474;
				}
			}
			.line {
				width: 644rpx;
				border: dashed 1rpx #757474;
				margin-left: 28rpx;
			}
			.Totalprice {
				padding-top: 28rpx;
				padding-left: 28rpx;
				display: flex;
				align-items: center;
				.xiaoxian {
					width: 117rpx;
					height: 117rpx;
				}
				.number {
					padding-left: 13rpx;
					font-size: 28rpx;
					color: #757474;
				}
			}
			
		}
	}
	

</style>
